<template>
    <div id="app">
        <!--头部框-->
        <div class="header">
            <div class="cloud-one" />
            <div class="cloud-two" />
            <div class="bamboo" />
            <!--cheering-->
            <div :class="{panda: true, cheering : cheering}" />
            <div class="grass" />

            <div class="upwrap">
                <el-upload
                    class="upload"
                    drag
                    :limit="10"
                    :on-exceed="handleExced"
                    :on-success="handleAvatarSuccess"
                    :on-progress="handleProgress"
                    :on-error="handleError"
                    action="//127.0.0.1:9998/webstatic/srt-upload"
                    multiple
                >
                    <i class="el-icon-upload uploadicon" />
                    <div class="el-upload__text">字幕-中译英</div>
                    <div class="el-upload__tip">将文件拖到此处，或点击上传。<br>请上传srt文件或txt文件，一次拖拽最多上传10个</div>
                </el-upload>

                <el-upload
                    class="upload"
                    drag
                    :limit="10"
                    :on-exceed="handleExced"
                    :on-success="handleAvatarSuccess"
                    :on-progress="handleProgress"
                    :on-error="handleError"
                    action="//127.0.0.1:9998/webstatic/srt-upload"
                    :data="{type: 1}"
                    multiple
                >
                    <i class="el-icon-upload uploadicon" />
                    <div class="el-upload__text">字幕-英译中</div>
                    <div class="el-upload__tip">将文件拖到此处，或点击上传。<br>请上传srt文件或txt文件，一次拖拽最多上传10个</div>
                </el-upload>
            </div>
        </div>

        <el-card class="box-card" shadow="never">
            <!-- <h2 class="head" style="margin-top: -20px; font-size: 16px;">这个工具有什么用？</h2>
            <p
                style=" font-size: 14px;"
            >内网tinypng工具，可以快速把图片压缩并上传到京东图片服务器。后台使用了开源的基于tinypng的压缩工具，压缩效率极高！省去了以往图片上传到tinypng，再替换本地图片上传到京东图片服务器的繁琐过程。</p> -->
            <!-- <h2 class="head">如何使用？</h2>
        <p>拖拽图片到上面的上传框，一试便知。</p>-->
            <el-table
            stripe
            :data="tableData"
            style="width: 100%">
                <el-table-column
                    prop="id"
                    width="40"
                    label="id">
                </el-table-column>
                <el-table-column
                    label="文件名">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDownori(scope.$index, scope.row)">{{scope.row.filename}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="lines"
                    width="80"
                    label="总行数">
                </el-table-column>
                <el-table-column
                    width="120"
                    label="创建时间">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.createtime ? formatDate(new Date(scope.row.createtime), 'YYYY-MM-DD HH:II:SS') : '' }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="120"
                    label="最新更新时间">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.modifytime ? formatDate(new Date(scope.row.modifytime), 'YYYY-MM-DD HH:II:SS') : '' }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 0">未执行</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.status == 1">执行中</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == 2">执行成功</el-tag>
                        <el-tag type="info" v-else-if="scope.row.status == 4">待重试</el-tag>
                        <el-tag type="danger" v-else>执行异常</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="usetime"
                    width="60"
                    label="执行耗时">
                </el-table-column>

                <el-table-column
                    prop="retry"
                    width="60"
                    label="重试次数">
                </el-table-column>

                <el-table-column
                    prop="downtimes"
                    width="60"
                    label="下载次数">
                </el-table-column>

                <el-table-column
                    label="最新下载时间">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.downtime ? formatDate(new Date(scope.row.downtime), 'YYYY-MM-DD HH:II:SS') : '' }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="类型">
                    <template slot-scope="scope">
                        <el-tag effect="dark" v-if="scope.row.type == 1">英译中</el-tag>
                        <el-tag effect="dark" type="warning" v-else>中译英</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button
                        v-if="scope.row.status == 2"
                        size="mini"
                        @click="handleDown(scope.$index, scope.row)">下载</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <el-card
                v-for="(item, index) in lists"
                :key="index"
                shadow="hover"
                :body-style="{ padding: '0px', height: '150px' }"
                class="elcard"
            >
                <el-image
                    style="width: 110px; height: 110px; padding: 5px;"
                    :src="item.url"
                    fit="contain"
                />
                <div style="padding: 5px; text-align: center;margin-top: -10px;">
                    <div class="bottom clearfix">
                        <el-tag
                            type="success"
                            size="mini"
                            effect="dark"
                            style="padding: 0 2px;"
                        >-{{ +item.aftersize ? (Math.round((1 - item.aftersize / item.beforesize) * 100)) : 0 }}%</el-tag>
                        <el-link
                            :id="'copy_' + index"
                            :data-url="'https:' + item.url"
                            type="info"
                            @click="copyurl"
                        >复制链接</el-link>
                    </div>
                </div>
            </el-card> -->
        </el-card>
        <a id="downloadLink" href="javascript:;" style="display:none;">download</a>
        <el-backtop />
    </div>
</template>

<script>
const request = require('axios');
function $formatDate(date, formatStr) {
    //格式化时间  
    var arrWeek = ['日', '一', '二', '三', '四', '五', '六'],
        str = formatStr
            .replace(/yyyy|YYYY/, date.getFullYear())
            .replace(/yy|YY/, $addZero(date.getFullYear(), 2))
            .replace(/mm|MM/, $addZero(date.getMonth() + 1, 2))
            .replace(/m|M/g, date.getMonth() + 1)
            .replace(/dd|DD/, $addZero(date.getDate(), 2))
            .replace(/d|D/g, date.getDate())
            .replace(/hh|HH/, $addZero(date.getHours(), 2))
            .replace(/h|H/g, date.getHours())
            .replace(/ii|II/, $addZero(date.getMinutes(), 2))
            .replace(/i|I/g, date.getMinutes())
            .replace(/ss|SS/, $addZero(date.getSeconds(), 2))
            .replace(/s|S/g, date.getSeconds())
            .replace(/w/g, date.getDay())
            .replace(/W/g, arrWeek[date.getDay()]);
    return str;
}
function $addZero(v, size) {
    for (var i = 0, len = size - (v + "").length; i < len; i++) {
        v = "0" + v;
    };
    return v + "";
}
export default {
    props: [],
    data () {
        return {
            lists: [],
            currentIndex: 1,
            cheering: false,
            isover: false,
            tableData: [],
        };
    },
    created() {
        // this.$Message({
        //   message: '复制链接成功',
        //   type: 'success'
        // });
        // 拉取数据
        this.getList();
        var that = this;
        window.addEventListener('scroll', function (event) {
            var sTop =
                document.documentElement.scrollTop == 0
                    ? document.body.scrollTop
                    : document.documentElement.scrollTop;
            sTop = Math.ceil(sTop);
            if (
                sTop + document.body.clientHeight ==
                document.body.scrollHeight &&
                !that.isover
            ) {
                that.getList();
            }
        });
    },
    methods: {
        getList(fresh) {
            request
                .get(
                    '//127.0.0.1:9998/webstatic/srt-getlist?index=' +
                    (this.currentIndex++),
                    {}
                )
                .then(body => {
                    var _t =
                        body &&
                            body.data &&
                            body.data.data
                            ? Array.from(body.data.data, function (ceil) {
                                return ceil;
                            })
                            : [];
                    if (_t.length < 20) {
                        this.isover = true;
                    }
                    if (fresh) {
                        this.tableData = _t;
                    } else {
                        this.tableData = this.tableData.concat(_t);
                    }
                })
                .catch(({ code, message }) => {
                    console.log(code, message);
                });
        },
        formatDate: $formatDate,
        showalert() { },
        handleAvatarSuccess(res) {
            if (res.ret == null) {
                console.log(arguments);
                // this.download(res);
                return;
            }
            // 上传成功
            console.log(res, "上传成功");
            this.cheering = true;
            // 去拉取数据
            this.currentIndex = 1;
            this.getList(true);
        },
        handleProgress(res, file) {
            // console.log(res, file, "上传中");
            this.cheering = false;
        },
        handleExced(res, file) {
            this.$message({
                message: '一次性上传的图片，不能超过10张',
                type: 'error'
            });
        },
        handleError() {
            console.log(arguments);
            this.$message({
                message: '上传失败=>' + JSON.stringify(arguments),
                type: 'error'
            });
        },
        handleDown (index, row) {
            var downloadLink = document.getElementById('downloadLink');
            downloadLink.href = "//127.0.0.1:9998/webstatic/srt-download?id=" + row.id;
            downloadLink.click();
        },
        handleDownori (index, row) {
            var downloadLink = document.getElementById('downloadLink');
            downloadLink.href = "//127.0.0.1:9998/webstatic/srt-downloadori?id=" + row.id;
            downloadLink.click();
        },
        handleDelete(index, row) {
            // 二次确认
            this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request
                    .get(
                        '//127.0.0.1:9998/webstatic/srt-deleteit?id=' + row.id,
                        {}
                    )
                    .then(body => {
                        if (body && body.data && body.data.ret == 0) {
                            // 删除成功
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.tableData.splice(index, 1);
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'warning'
                            });
                        }
                    })
                    .catch(({ code, message }) => {
                        console.log(code, message);
                        this.$message({
                            message: '删除失败',
                            type: 'warning'
                        });
                    });
            }).catch(() => {
            });
        },
    }
}
</script>
<style>
body {
    font-family: Ubuntu;
    color: #555;
    padding: 0;
    margin: 0;
    background: linear-gradient(to bottom, #c6dde4, #fefeff);
    height: 100vh;
    overflow-x: hidden;
    background-repeat: no-repeat;
}

.el-upload-list--picture .el-upload-list__item {
    height: auto;
}

.el-upload-dragger {
    border: 2px dashed #616778;
    border-radius: 10px;
    background-color: transparent;
}
.el-upload-dragger .el-upload__text {
    color: #41444e;
    font-size: 16px;
    font-weight: bold;
}
.el-upload-dragger .el-icon-upload {
    color: #41444e;
}

.el-upload-list {
    width: 300px;
    margin: auto;
    margin-top: 100px;
}
</style>
<style scoped>
.header {
    max-width: 1200px;
    margin: auto;
    position: relative;
    padding-top: 50px;
}
.upload {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}
.picitem {
    display: flex;
    justify-content: center;
    align-items: center;
}
.picurl {
    word-break: break-word;
    width: 80%;
    text-align: left;
    margin-left: 30px;
    margin-right: 30px;
    font-size: 12px;
}
.picinfo {
    width: 100px;
    text-align: left;
    flex: 0 0 100px;
}
.picinfo > p {
    margin: 0;
}
.btncont {
    display: flex;
    justify-content: center;
    align-items: center;
}
.cloud-one {
    background-image: url(https://tinypng.com/images/jpg/cloud-left-2x.png);
    width: 557px;
    height: 223px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: -150px;
    top: -30px;
}
.cloud-two {
    background-image: url(https://tinypng.com/images/jpg/cloud-right-2x.png);
    width: 724px;
    height: 256px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: -150px;
    top: -30px;
}
.bamboo {
    background-image: url(https://tinypng.com/images/bamboo-2x.png);
    width: 320px;
    height: 1000px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: -100px;
    top: -700px;
}
.panda {
    width: 269px;
    height: 253px;
    background-image: url(https://tinypng.com/images/panda-chewing-2x.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: -100px;
}
.panda.cheering {
    background-image: url(https://tinypng.com/images/panda-happy-2x.png);
}
.grass {
    width: 1551px;
    height: 27px;
    background-image: url(https://tinypng.com/images/grass-confetti-2x.png);
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: -340px;
    top: 280px;
}
.box-card {
    margin: auto;
    margin-top: 30px;
    text-align: left;
    border: none;
    background-color: transparent;
    width: 1200px;
}
.elcard {
    width: 120px;
    float: left;
    margin-bottom: 10px;
    margin-right: 10px;
}
.bottom {
    white-space: nowrap;
}

.upwrap {
    display: flex;
    justify-content: center;
}
</style>
